<template>
  <div>
    <el-dialog :visible.sync="addEditIsDialog_c" width="130rem !important" @close="resetForm">
      <div class="nx-content">
        <div class="top-content">
          <el-form :inline="true" ref="formChildName" :model="ruleForm" class="demo-form-inline form-head">
            <el-form-item label="调整单号"><el-input v-model="ruleForm.code" placeholder=""
                readonly></el-input></el-form-item>
            <el-form-item label="调整入类型">
              <el-input v-model="ruleForm.inTypeName" placeholder="" readonly></el-input>
            </el-form-item>
            <el-form-item label="调整出类型">
              <el-input v-model="ruleForm.outTypeName" placeholder="" readonly></el-input>
            </el-form-item>
            <el-form-item label="调整时间">
              <el-date-picker v-model="ruleForm.adjustDate" type="date" :editable="false" placeholder="请选择" align="right"
                :picker-options="pickerOptions" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%"
                readonly> </el-date-picker>
            </el-form-item>
            <el-form-item label="到达地" label-width="8.5rem">
              <el-input v-model="ruleForm.addressArrival" placeholder="" readonly></el-input>
            </el-form-item>
            <el-form-item label="备注" label-width="9.7rem">
              <el-input v-model="ruleForm.remark" placeholder="" class="remark" readonly></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="center-content">
          <NxTablePad :table-cols="tableCols" :table-data="tableData" :pagInationIf="false" :height="'28.5rem'"
            :isIndex="true" class="table-wrap">
            <template slot="beforeSex" slot-scope="scope">
              <span v-if="scope.row.beforeSex == 0">未鉴定</span>
              <span v-if="scope.row.beforeSex == 1">雄</span>
              <span v-if="scope.row.beforeSex == 2">雌</span>
            </template>
            <template slot="nowSex" slot-scope="scope">
              <span v-if="scope.row.nowSex == 0">未鉴定</span>
              <span v-if="scope.row.nowSex == 1">雄</span>
              <span v-if="scope.row.nowSex == 2">雌</span>
            </template>
            <template slot="operation" slot-scope="scope">
              <el-button type="success" :disabled="status == 1" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="danger" :disabled="status == 1" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </NxTablePad>
        </div>
        <div class="bottom-content">
          <div class="left">
            <!-- <div>条数合计：{{ calcNum }}</div>
            <div>重量合计：{{ calcWeight }}</div> -->
          </div>
          <!-- <div class="right">
            <el-button class="btn" @click="handleBack()">上一步</el-button>
            <el-button class="btn-light-blue btn" @click="submitForm('formChildName')">确 认</el-button>
          </div> -->
        </div>
      </div>
    </el-dialog>
    <changeFishType ref="changeFish">
    </changeFishType>
  </div>
</template>
<script type="text/ecmascript-6">
import changeFishType from './changeFishtType.vue'

import NxTablePad from "@/components/NxTablePad.vue";
import { getAdjustOrderWeightDetailPad, delAdjustOrderWeightDetail } from "@/api/adjustment";
export default {
  components: {
    NxTablePad,
    changeFishType
  },
  props: {
    detailId: {
      type: String,
      default: "",
    },
    detailStatus: {
      type: String,
      default: "add",
    },
    detailIsDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      searchForm: {
        // 表单字段
        companyId: "",
        baseId: "",
      },
      ruleForm: {
        companyId: "",
        baseId: "",
        id: "",
        code: "",
        inTypeName: "",
        outTypeName: "",
        addressArrival: "",
        adjustDate: "",
        remark: "",
      },
      tableCols: [
        {
          label: "鱼池名称",
          prop: "fishpondName",
          align: "center",
        },
        {
          label: "鱼名",
          prop: "fishName",
          align: "center",
        },
        {
          label: "类型",
          prop: "fishCode",
          align: "center",
        },
        {
          label: "批次",
          prop: "batchCode",
          align: "center",
        },
        {
          label: "卵径",
          prop: "diameter",
          align: "center",
        },
        {
          label: "调整重量",
          prop: "weight",
          align: "center",
        },
        {
          label: '操作',
          slot: 'operation',
          align: 'center',
          width: '200',
          fixed: 'right',
        },
        // {
        //   label: "备注",
        //   prop: "remark",
        //   align: "center",
        // },
      ],
      tableData: [],
      calcWeight: 0, // 计算重量
      calcNum: 0, //计算数量
      addEditIsDialog_c: false, // 弹窗是否显示
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
    };
  },
  watch: {
    detailIsDialog(val) {
      this.addEditIsDialog_c = val;
      if (this.addEditIsDialog_c) {
        // 添加
        if (this.detailStatus == "add") {
          this.ruleForm.id = "";
          // this.seeType = false;
        }

        // 编辑
        if (this.detailStatus == "edit") {
          this.ruleForm.id = this.detailId;
          // this.seeType = false;
          this.getDetail();
        }

        // 查看
        if (this.detailStatus == "see") {
          this.ruleForm.id = this.detailId;
          // this.seeType = true;
          this.getDetail();
        }
        this.ruleForm.companyId = this.companyId;
        this.ruleForm.baseId = this.baseId;
      }
    },
  },
  methods: {
    // 编辑
    handleEdit(row) {
      this.$refs.changeFish.baseId = this.ruleForm.baseId
      this.$refs.changeFish.companyId = this.ruleForm.companyId
      this.$refs.changeFish.addEditId = row.id
      this.$refs.changeFish.getObjFishs()
      this.$refs.changeFish.getObjFishTypes()
      this.$refs.changeFish.getObjDiameters()
      this.$refs.changeFish.getObjFishBatchs()
      setTimeout(() => {
        this.$refs.changeFish.addEditIsDialog_c = true
        this.$refs.changeFish.getDetail()
      }, 200);

    },
    // 删除 
    handleDelete(row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const params = {
            id: row.id
          }
          delAdjustOrderWeightDetail(params).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: res.msg,
              })
              this.getDetail()
            }
          })
        })
        .catch((err) => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 详情
    getDetail() {
      getAdjustOrderWeightDetailPad({ id: this.detailId }).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.tableData.forEach((item) => {
            this.calcNum += item.num;
            this.calcWeight += item.weight;
          })
          this.ruleForm = res.data;
        }
      });
    },
    // 提交
    submitForm(formChildName) {
      this.$refs[formChildName].validate((valid) => {
        if (valid) {
          this.ruleForm.list = this.tableData;
          createTransferDatas(this.ruleForm).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: res.msg,
              });

              // 关闭弹窗
              this.$parent.closeAddEdit();
              // 刷新列表
              // this.$parent.getControlDeviceGroupUnits();
            }
          });
        }
      });
    },
    // 关闭
    // reset() {
    //   this.searchForm = {
    //     outFishpondId: "",
    //     inFishpondId: "",
    //     fishCode: "",
    //     num: "",
    //     diameter: "",
    //   };
    //   this.tableData = this.infosData;
    //   this.calcWeight = 0;
    //   this.ruleForm.companyId = this.companyId;
    //   this.ruleForm.baseId = this.baseId;
    //   this.ruleForm.code = '';
    //   this.$parent.closeAddEdit();
    //   this.$parent.$refs.formName.resetFields();
    //   this.$parent.closeSun();
    // },
    // 取消
    resetForm() {
      this.searchForm = {
        outFishpondId: "",
        inFishpondId: "",
        fishCode: "",
        num: "",
        diameter: "",
      };
      this.tableData = this.infosData;
      this.calcWeight = 0;
      this.ruleForm.companyId = this.companyId;
      this.ruleForm.baseId = this.baseId;
      this.ruleForm.code = '';
      this.$parent.closeAddEdit();
    },
    // 上一步
    handleBack() {
      this.resetForm();
      this.$parent.closeAddEdit();
    }
  },
};
</script>

<style lang="less" scoped>
/deep/.el-dialog__close {
  font-size: 3.69rem !important;

}

/deep/.el-dialog__headerbtn {
  top: 0.828571rem;
}

/deep/.el-dialog__body {
  font-size: 1.86rem !important;
}

.nx-content {
  width: 100% !important;
  height: 60rem !important;
  display: flex;
  flex-direction: column;
}

.top-content {
  border-radius: 0.5rem;
  width: 100%;
  height: 20%;
  border: 0.2rem solid #e4eaee;

  .form-head {
    /deep/.el-form-item {
      margin-top: 0.671429rem;
      margin-bottom: 0.671429rem;
    }

    /deep/.el-form-item__content {
      line-height: 3.657143rem;
      font-size: 1.86rem;
    }

    /deep/.el-input__inner {
      width: 19.54rem;
      height: 3.7rem;
    }

    /deep/ .el-form-item__label {
      font-size: 1.86rem;
      line-height: 3.7rem;
    }

    /deep/.el-input__icon {
      line-height: 3.857143rem;
    }

    /deep/.el-input {
      font-size: 1.86rem !important;
    }

    .remark {
      /deep/.el-input__inner {
        width: 81.64rem;
        height: 3.7rem;
      }
    }
  }
}

.el-form-item {
  padding-left: 1.5rem;
}

.center-content {
  margin-top: 1rem;
  width: 100%;
  height: 70%;
  border: 0.2rem solid #e4eaee;
  padding-bottom: 1rem;
  border-bottom: 0.2rem solid #ebeff1;
}

.bottom-content {
  display: flex;
  justify-content: space-between;
  margin-top: .5rem;

  .left {
    width: 35%;
    display: flex;
    justify-content: space-between;
    line-height: 4.48rem;
    font-size: 1.86rem;
  }

  .right {
    .btn {
      width: 9.65rem;
      height: 4.48rem;
      font-size: 2.19rem;
      margin-left: 1.3rem;
    }
  }
}
</style>
